<template>
  <div class="box">
    <van-sticky class="nav">
      <!-- 顶部导航 -->
      <van-nav-bar class="topNaV" @click-left="onClickLeft">
        <template #title>
          <p class="title">地址管理</p>
        </template>
        <template #left>
          <van-icon name="arrow-left" color="#666666" />
          <p class="left">返回</p>
        </template>
      </van-nav-bar>
    </van-sticky>
    <!--  -->
    <!--  -->
    <div class="addcard">
      <van-swipe-cell class="pay-container" v-for="item in list" :key="item.id">
        <div class="address">
          <div class="name">
            <p class="name-text">{{ item.name }}</p>
          </div>
          <div class="address-card">
            <div class="p1">
              <div class="box1">{{ item.mobile }}</div>
              <div class="box2" v-if="sure == item.is_default">默认</div>
            </div>
            <p class="p2">
              <span>{{ item.address }}</span>
              <span>{{ item.address_detail }}</span>
            </p>
          </div>
          <div class="icon" @click="edit(item)">
            <img src="@/assets/icons/矩形.png" alt="" />
          </div>
        </div>
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            @click="del(item.id)"
          />
        </template>
      </van-swipe-cell>
    </div>

    <!--  -->
    <!--  -->

    <div class="add">
      <div @click="edit">+新建地址</div>
    </div>
  </div>
</template>
<script setup>
import { getListAction, addressDel } from '@/api/index'
import { ref } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
const list = ref([])
// const isshow = ref(true)
const sure = ref(1)
const router = useRouter()
const store = useStore()
const init = () => {
  getListAction({ openId: store.state.openId }).then(res => {
    list.value = res.data
  })
}
const onClickLeft = () => {
  router.back()
}
const edit = (obj) => {
  if (obj) {
    router.push({ name: 'editAddress', params: { data: obj } })
  } else {
    router.push({ name: 'editAddress' })
  }
}
const del = (id) => {
  addressDel({ id: id })
  init()
}
init()
</script>
<script>
export default {
  name: 'addressView'
}
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.box {
  background-color: #000;
  .nav {
    .topNav {
      .left {
        font-size: 31.2px;
        color: #666666;
        letter-spacing: 0;
        font-weight: 400;
      }

      .title {
        font-size: 36px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 500;
      }
    }
  }
  .addcard {
    margin: 20px 0 200px;
    overflow: auto;
    .pay-container {
      width: 710px;
      margin: 20px;
      overflow: hidden;
      .address {
        background-color: #fff;
        width: 710px;
        height: 230px;
        border-top: 1px solid #dfdfdf; //
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow: hidden;
        .name {
          width: 121px;
          margin-top: 52.5px;
          margin-left: 34px;
          overflow: hidden;

          .name-text {
            height: 42px;
            width: 121px;
            text-align: left;
            line-height: 42px;
            font-size: 30px;
            color: #333333;
            letter-spacing: 0;
            font-weight: 600;
          }
        }
        .address-card {
          width: 383px;
          display: flex;
          justify-content: flex-start;
          align-content: flex-start;
          flex-wrap: wrap;
          overflow: hidden;
          .p1 {
            width: 383px;
            text-align: left;
            font-size: 28px;
            color: #333333;
            letter-spacing: 0;
            font-weight: 400;
            overflow: hidden;
            display: flex;
            .box1 {
              font-size: 28px;
              color: #333333;
              letter-spacing: 0;
              font-weight: 400;
              line-height: 40px;
              height: 40px;
              margin-top: 55.5px;
            }
            .box2 {
              width: 100px;
              text-align: center;
              border: 1px solid #9e4242;
              border-radius: 4px;
              font-size: 28px;
              color: #9e4242;
              letter-spacing: 0;
              font-weight: 400;
              line-height: 38px;
              height: 38px;
              margin-top: 55px;
              margin-left: 24px;
            }
          }
          .p2 {
            width: 510px;
            text-align: left;
            font-size: 24px;
            color: #999999;
            letter-spacing: 0;
            font-weight: 400;
            height: 33px;
            line-height: 33px;
            margin-top: 14px;
          }
        }
        .icon {
          img {
            width: 40px;
            height: 40px;
            margin-top: 109.5px;
            margin-left: 81px;
          }
        }
      }
      .address:first-child {
        border-top: 0;
      }
      .delete-button {
        height: 100%;
      }
    }
  }
  .add {
    position: fixed;
    bottom: 0;
    background-color: #000;
    width: 750px;
    overflow: hidden;
    height: 178px;
    z-index: 9999;
    text-align: center;
    padding-top: 40px;

    div {
      background: #cea62a;
      border-radius: 44.5px;
      width: 710px;
      height: 90px;
      border: none;
      margin: 0 auto 68px;
      font-size: 30px;
      color: #ffffff;
      letter-spacing: 0;
      font-weight: 500;
      line-height: 90px;
    }
  }
}
</style>
